<div class="margintop marginbottom">
    <button type="button" class="pn" onclick="showPositionDialog()"><span>新增广告位</span></button>
</div>
<table class="tb tb2">
    <tr class="header">
        <th>ID</th>
        <th>位置名称</th>
        <th>位置类型</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    
    <!--{loop $positionlist $pos}-->
    <tr>
        <td>{$pos[id]}</td>
        <td>{$pos[name]}</td>
        <td>{$pos[position]}</td>
        <td>{$pos[type]}</td>
        <td>{$pos[status_text]}</td>
        <td>
            <a href="javascript:;" onclick="showPositionDialog(JSON.parse('{eval echo json_encode($pos)}'))">编辑</a> |
            <a href="javascript:;" onclick="deletePosition({$pos[id]}, '{$pos[name]}')">删除</a>
        </td>
    </tr>
    <!--{/loop}-->
</table>

<!-- 添加编辑表单对话框 -->
<div id="positionDialog" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border:1px solid #ccc;z-index:9999;width:500px;">
    <h3 style="margin-bottom:15px;border-bottom:2px solid #369;padding-bottom:8px;">编辑广告位</h3>
    <div class="tabmenu" style="margin-bottom:10px;border-bottom:2px solid #369;">
        <a href="javascript:;" 
            style="display:inline-block;
                margin:0 2px;
                padding:10px 25px;
                font-size:14px;
                background:#FFF;
                border:1px solid #369;
                border-radius:4px 4px 0 0;
                color:#333;
                text-decoration:none;
                transition:all 0.3s;"
            onclick="switchTab('basic', event)">基础设置</a>
        <a href="javascript:;" 
            style="display:inline-block;
                margin:0 2px;
                padding:10px 25px;
                font-size:14px;
                background:#F5F5F5;
                border:1px solid #369;
                border-radius:4px 4px 0 0;
                color:#333;
                text-decoration:none;
                transition:all 0.3s;"
            onclick="switchTab('style', event)">样式设置</a>
        <a href="javascript:;" 
            style="display:inline-block;
                margin:0 2px;
                padding:10px 25px;
                font-size:14px;
                background:#F5F5F5;
                border:1px solid #369;
                border-radius:4px 4px 0 0;
                color:#333;
                text-decoration:none;
                transition:all 0.3s;"
            onclick="switchTab('advanced', event)">高级设置</a>
    </div>
    <form id="positionForm" method="post" action="?action=plugins&operation=config&do={$pluginid}&identifier=erling_gridad_combo&pmod=admin_position">
        <input type="hidden" name="formhash" value="{FORMHASH}">
        <input type="hidden" name="positionsubmit" value="1">
        <input type="hidden" id="dialogId" name="id" value="">
        <div id="tab_basic" class="tabcontent">
            <table class="tb tb2">
                <tr>
                    <td width="100">位置名称</td>
                    <td><input type="text" id="dialogName" name="name" class="txt"></td>
                </tr>
                <tr>
                    <td>位置</td>
                    <td>
                        <select id="dialogPosition" name="position" class="ps">
                            <option value="2" selected>首页头部</option>
                            <option value="3">首页中部</option>
                            <option value="4">首页底部</option>
                            <option value="5">帖子页右侧</option>
                        </select>
                    </td>
                    <td>类型</td>
                    <td>
                        <select id="dialogType" name="type" class="ps">
                            <option value="text">文字格子广告</option>
                            <option value="image">图片格子广告</option>
                            <option value="banner">横幅滚动广告</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>状态</td>
                    <td>
                        <select id="dialogStatus" name="status" class="ps">
                            <option value="1">启用</option>
                            <option value="2">停用</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>允许用户组</td>
                    <td>
                        <select name="allowed_groups[]" multiple class="ps" style="height: 145px;width:300px;">
                            <option value="clear" onclick="this.parentNode.querySelectorAll('option').forEach(opt => opt.selected = false); this.selected = true">-- 清空选择 --</option>
                            
                            <optgroup label="会员用户组">
                            <!--{loop $_var['cache']['usergroups'] $groupid $group}-->
                                <!--{if in_array($groupid, array(9,10,11,12,13,14,15))}-->
                                <option value="{$groupid}">{$group[grouptitle]}</option>
                                <!--{/if}-->
                            <!--{/loop}-->
                            </optgroup>
                            
                            <optgroup label="自定义用户组">
                            <!--{loop $_var['cache']['usergroups'] $groupid $group}-->
                                <!--{if in_array($groupid, array(16,17,18,19))}-->
                                <option value="{$groupid}">{$group[grouptitle]}</option>
                                <!--{/if}-->
                            <!--{/loop}-->
                            </optgroup>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>积分设置</td>
                    <td>
                        每日：<input type="number" name="daily_credit" value="10" style="width:80px;">
                        每月：<input type="number" name="monthly_credit" value="200" style="width:80px;">
                    </td>
                </tr>
            </table>
        </div>
        <div id="tab_style" class="tabcontent" style="display:none;">
            <table class="tb tb2">
                <tr>
                    <td width="120">展示布局</td>
                    <td>
                        列数：<select name="grid_columns" style="width:80px;">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3" selected>3</option>
                            <option value="4">4</option>
                        </select>
                        行数：<select name="grid_rows" style="width:80px;">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3" selected>3</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>默认文字</td>
                    <td><input type="text" name="empty_text" value="广告位招租中" class="txt"></td>
                </tr>
                <tr>
                    <td>文字颜色</td>
                    <td><input type="color" name="default_color" value="#333333" class="txt"></td>
                </tr>
                <tr>
                    <td>背景颜色</td>
                    <td><input type="color" name="default_bgcolor" value="#FFFFFF" class="txt"></td>
                </tr>
            </table>
        </div>
        <div id="tab_advanced" class="tabcontent" style="display:none;">
            <table class="tb tb2">
                <tr>
                    <td>随机排序</td>
                    <td>
                        <label><input type="radio" name="random_sort" value="1"> 开启</label>
                        <label><input type="radio" name="random_sort" value="0" checked> 关闭</label>
                    </td>
                </tr>
            </table>
        </div>
        <div style="text-align:center;margin-top:15px;">
            <button type="submit" class="pn"><span>保存</span></button>
            <button type="button" class="pn" onclick="hidePositionDialog()"><span>取消</span></button>
        </div>
    </form>
</div>
<script>
    function switchTab(tabName, event) {  // 添加 event 参数
        document.querySelectorAll('.tabcontent').forEach(div => div.style.display = 'none');
        document.querySelectorAll('.tabmenu a').forEach(a => {
            a.style.background = '#F5F5F5';
            a.style.borderColor = '#DDD';
            a.style.color = '#666';
        });
        
        document.getElementById('tab_' + tabName).style.display = 'block';
        event.currentTarget.style.background = '#FFF';
        event.currentTarget.style.borderColor = '#369';
        event.currentTarget.style.color = '#333';
    }
    // 用户组选择清空逻辑
    document.querySelector('select[name="allowed_groups[]"]').addEventListener('change', function(e) {
        if(this.querySelector('option[value="clear"]:checked')) {
            this.querySelectorAll('option').forEach(opt => opt.selected = false);
        }
    });
</script>
<!-- 遮罩层 -->
<div id="dialogOverlay" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;z-index:9998;"></div>

<script>
// 删除广告位
function deletePosition(id, name) {
    if(confirm('确定要删除广告位 "' + name + '" 吗？')) {
        window.location.href = '?action=plugins&operation=config&do={$pluginid}&identifier=erling_gridad_combo&pmod=admin_position&type=delete&id=' + id;
    }
}

// 显示编辑对话框
function showPositionDialog(pos) {
    if(pos && pos.id) {
        document.getElementById('dialogId').value = pos.id;
        document.getElementById('dialogName').value = pos.name || '';
        document.getElementById('dialogType').value = pos.type || 'text';
        document.getElementById('dialogStatus').value = pos.status || '1';
        document.getElementById('dialogPosition').value = pos.position || '2';
    } else {
        // 清空表单用于新增
        document.getElementById('positionForm').reset();
        document.getElementById('dialogId').value = '';
        document.getElementById('dialogPosition').value = '2';
    }
    
    document.getElementById('positionDialog').style.display = 'block';
    document.getElementById('dialogOverlay').style.display = 'block';
}

// 隐藏对话框
function hidePositionDialog() {
    document.getElementById('positionDialog').style.display = 'none';
    document.getElementById('dialogOverlay').style.display = 'none';
}


</script>